/** 事件绑定
 * 语法：on + 事件名称 = { 事件处理程序 } 
 *      比如：`<div onClick={()=>{}}></div>
 *  
 */

import React from "react"
// 自定义传递参数
function Hello () {
  const clickHandler = (e, msg) => {
    console.log(e, 'e')
    console.log(msg, 'msg')
  }
  return <div onClick={(e) => clickHandler(e, 'this is msg')}>函数传参</div>
}

function HelloFn () {
  // 需要const定义 ---调用不需要加this
  const clickHandler = (e) => {
    console.log(e, 'e')
    console.log('函数组件的点击事件被触发了')
    e.preventDefault()
  }
  return <div onClick={clickHandler}><a href="http://baidu.com">百度</a></div>
}
class HelloCompontent extends React.Component {
  // 不需要const定义 ---调用需要加this
  // 事件回调函数(标准写法 避免this的指向问题)
  // 这样写 在回调函数中的this指向的是当前的实例对象
  clickHandler = () => {
    console.log('类组件的点击事件被触发了')
  }
  render () {
    return <div onClick={this.clickHandler}>this is class compontent</div>
  }
}
function App () {
  return (
    <div className="App">
      <HelloFn />
      <HelloCompontent></HelloCompontent>
      <Hello></Hello>
    </div>
  )
}

export default App
